<template>
	<view class="page">
		<view class="section">
			<view class="tc">
				2023年01期
			</view>
		</view>
		<view class="br-b-f5">
			<tab-view :tab-list="tabList" @doTab="tabChange"></tab-view>
		</view>
		<view class="section">
			<view class="flex padding-m br-b-f5">
				<view class="flex-3">{{model.name}}
					<span v-if="model.direction&&model.direction === '借'"
						class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span>
					<span v-else-if="model.direction&&model.direction === '贷'"
						class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
				</view>
				<view>{{model.amount}}</view>
			</view>
			<view class="flex padding-m br-b-f5 margin-left-default" v-for="(item, index) in model.subjectList">
				<view class="flex-3">{{item.name}}
				</view>
				<view>{{item.amount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					index: 0,
					name: '管理费用'
				}, {
					index: 1,
					name: '财务费用'
				}, {
					index: 2,
					name: '销售费用'
				}],
				model: {
					name: '合计',
					amount: 100000,
					direction: '借',
					subjectList: [{
						name: '差旅费',
						amount: 8000,
					}, {
						name: '住宿费',
						amount: 8000,
					} ,{
						name: '通讯费',
						amount: 8000,
					} ,{
						name: '交通费',
						amount: 8000,
					}]
				}
			}
		},
		methods: {
			tabChange(event) {
				this.model.subjectList.push({name:'添加费',amount:80000})
				this.tabIndex = event.index
			},
		}
	}
</script>

<style>

</style>